<template>
	<image :src="realSrc" :mode="mode" :style="imageStyle" @load="onImageLoaded" @click="onClickImage"></image>
</template>

<script>
	import {RES_PREFIX} from '@/utils/const.js'
	export default {
		name:"netImage",
		props: {
			src: {
				type: String,
				default(){
					return ''
				}
			},
			width: {
				type: String,
				default(){
					return ''
				}
			},
			height: {
				type: String,
				default(){
					return ''
				}
			},
			mode: {
				type: String,
				default(){
					return 'widthFix'
				}
			},
		},
		data() {
			return {
				isLoaded: false,
				imageWidth: 0,
				imageHeigt: 0
			};
		},
		computed: {
			realSrc(){
				if(this.src[0] == '@'){
					return this.src.substring(1)
				}
				return `${RES_PREFIX}${this.src}`
			},
			imageStyle(){
				const styles = []
				
				if(this.width != ''){
					styles.push(`width: ${this.width}`)
				}else if(this.imageWidth != 0){
					styles.push(`width: ${this.imageWidth}rpx`)
				}else{
					// styles.push('width: auto')
				}
				if(this.height != ''){
					styles.push(`height: ${this.height}`)
				}else if(this.imageHeigt != 0){
					styles.push(`height: ${this.imageHeigt}rpx`)
				}

				//当手动指定过宽高时，不隐藏图片
                if(!this.isLoaded && this.width == '' && this.height == ''){
                    styles.push('visibility: hidden');
                }
				
				return styles.join(';')
			}
		},
		methods: {
			onImageLoaded(img){
				this.$emit('load', img)
                this.imageWidth = img.detail.width
                this.imageHeigt = img.detail.height
                this.$nextTick(()=>{
                    this.isLoaded = true
                })
			},
			onClickImage(){
				this.$emit('click')
			}
		}
	}
</script>

<style>

</style>